<template>
  <div class="app-container customer-div">
    <el-tabs v-model="listQuery.tab" @tab-click="handleSearchList">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="待物流报价" name="unInput"></el-tab-pane>
      <el-tab-pane label="待填运费" name="unFreight"></el-tab-pane>
      <el-tab-pane label="已处理" name="hasInput"></el-tab-pane>
    </el-tabs>
    <!--数据列表-->
    <div class="table-container">
      <vxe-grid
        ref="xGrid"
        v-bind="gridOptions"
        size="mini"
        :loading="listLoading"
      >
       <template #toolbar_buttons>
          <!-- <el-radio-group
            v-model="listQuery.tab"
            size="small"
            @change="handleSearchList"
          >
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="unInput">待物流报价</el-radio-button>
            <el-radio-button label="unFreight">待填运费</el-radio-button>
            <el-radio-button label="hasInput">已处理</el-radio-button>
          </el-radio-group> -->
       </template>
        <template #form>
          <!--搜索-->
          <div>
            <div
              v-show="listQuery.tab!=='unFreight'"
              style="
                background: #f5f7fa;
                padding: 15px 15px 0 15px;
                border: 1px solid #ebeef5;
                border-bottom: 0.5px solid #ebeef5;
              "
            >
              <el-form
                :inline="true"
                :model="listQuery"
                size="mini"
                label-width="100px"
              >
                <el-form-item label="业务员：">
                  <el-select
                    v-model="listQuery.inquiryUserId"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in userOptionList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="询运费时间：">
                  <el-date-picker
                    v-model="listQuery.freightInquiryTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="报价人：">
                  <el-select
                    v-model="listQuery.priceUserId"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in userOptionList2"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="是否下单：">
                  <el-select
                    v-model="listQuery.isOrder"
                    placeholder="请选择"
                    clearable>
                      <el-option key="0" label="否" value="0"></el-option>
                      <el-option key="1" label="是" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="牌号：">
                   <el-input clearable v-model="listQuery.goodsSn"></el-input>
                </el-form-item>

                <el-form-item label="发货地：">
                  <el-input clearable v-model="listQuery.sendArea"></el-input>
                </el-form-item>

                <el-form-item label="收货地：">
                  <el-input clearable v-model="listQuery.receiveArea"></el-input>
                </el-form-item>




                <el-form-item>
                  <el-button @click="handleSearchList" type="primary">
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container" style="float: right">
              <el-pagination
                v-show="listQuery.tab!='unFreight'"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10, 15, 20, 50, 100, 200]"
                :total="count"
              >
              </el-pagination>
              <!-- 待填运费分页 -->
               <el-pagination
               v-show="listQuery.tab=='unFreight'"
                background
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery1.pageNum"
                :page-size="listQuery1.pageSize"
                :page-sizes="[10, 15, 20, 50, 100, 200]"
                :total="count"
              >
              </el-pagination>
            </div>
          </div>
        </template>
        <template #num1_default="{ row, rowIndex }">
          <el-link
            @click="toDetail(row)"
            type="primary"
            style="font-size: 12px"
            >{{ row.orderSn }}</el-link
          >
        </template>
        <template #num2_default="{ row, rowIndex }">
          <span>{{ row.expectSendDate }}</span>
          <span
            style="
              background: red;
              color: #fff;
              padding: 0 5px;
              border-radius: 5px;
            "
            v-if="row.urgentType == '必须'"
            >必须</span
          >
          <span
            style="
              background: #ff6600;
              color: #fff;
              padding: 0 5px;
              border-radius: 5px;
            "
            v-if="row.urgentType == '可延1-2天'"
            >1-2天</span
          >
          <span
            style="
              background: #ff9900;
              color: #fff;
              padding: 0 5px;
              border-radius: 5px;
            "
            v-if="row.urgentType == '可延1-2周'"
            >1-2周</span
          >
          <span
            style="
              background: #0099ff;
              color: #fff;
              padding: 0 5px;
              border-radius: 5px;
            "
            v-if="row.urgentType == '等客户通知'"
            >等待</span
          >
        </template>

        <template #num3_default="{ row, rowIndex }">
          <el-button
            style="margin-right: 10px"
            type="text"
            size="small"
            v-if="row.freightState == 10 || listQuery.tab=='unFreight'"
            @click="editFreight(row)"
            >填写运费</el-button
          >
          <el-button
            style="margin-right: 10px"
            type="text"
            size="small"
            v-if="row.freightState == 20 && row.qList[0].inquiryState != 70"
            @click="editFreight(row)"
            >修改运费</el-button
          >
        </template>
        <template #num4_default="{ row, rowIndex }">
          <span>{{ row.categoryName }}/{{ row.goodsSn }}</span>
        </template>
      </vxe-grid>
    </div>

    <!--填写运费-->
    <inputFreight ref="inputFreight" @update="getListData" @update1="getWaitFreightList"></inputFreight>
  </div>
</template>

<script>
import { getOrderUsersList } from '@/api/partner'
import { supplierListApi } from "@/api/allInLine/company";
import {
  logisticsPriceList,
  getWaitFreightListAPI
} from "@/api/allInLine/inquiry";
import { formatDate } from "@/utils/date";
import inputFreight from "./InquiryCom/inputFreight";
import store from "@/store";
import { mapGetters } from "vuex";

const defaultListQuery = {
  keywords: "",
  pageNum: 1,
  pageSize: 10,
  inquiryTime: [],
  freightInquiryTime: [],
  inquiryUserId: "",
  tab: "all",
  priceUserId:'',
  isOrder:'',
  goodsSn:'',
  sendArea:'',
  receiveArea:''
};

const defaultListQuery1 = {
  pageNum: 1,
  pageSize: 10,
};

export default {
  name: "index",
  data() {
    return {
      roles: store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      listQuery1: JSON.parse(JSON.stringify(defaultListQuery1)),
      count: 0,
      listLoading: false,
      loading: false,
      loading2: false,
      supplierList2: [],
      options: [],
      userOptionList: [],
      gridOptions: {
        loading: this.listLoading,
        border: true,
        id: "freightOffer",
        align: "center",
        autoResize: true,
        height: 700,
        size: "mini",
        rowConfig: {
          keyField: "fOId",
          isHover: true,
        },
        columnConfig: {
          resizable: true,
        },
        customConfig: {
          storage: true,
        },
        checkboxConfig: {
          reserve: true,
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
          slots: {
            buttons: "toolbar_buttons",
          },
        },
        spanMethod({
          row,
          rowIndex,
          $rowIndex,
          _rowIndex,
          column,
          columnIndex,
          $columnIndex,
          _columnIndex,
          visibleData,
        }) {
          let fields = ["setting", "freightSn"];
          if (!fields.includes(column["field"])) {
            return { rowspan: 1, colspan: 1 };
          } else if (row["isMerge"] && fields.includes(column["field"])) {
            return { rowspan: row["rowNum"], colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        },
        columns:[
            {
              field: "freightSn",
              title: "编号",
              width: 100,
            },
            {
              field: "inquiryUserName",
              title: "业务员",
              width: 100,
            },
            {
              field: "chargeUserName",
              title: "采购员",
              width: 100,
            },
            {
              field: "goodsSn",
              title: "品名牌号",
              width: 120,
              slots: {
                default: "num4_default",
              },
            },
            {
              field: "receiveArea",
              title: "交货地",
              width: 150,
            },
            {
              field: "goodsNum",
              title: "数量(吨)",
              width: 120,
            },
            {
              field: "sendTypes",
              title: "交货方式",
              width: 100,
            },
            {
              field: "sendArea",
              title: "发货地",
              width: 150,
            },
            {
              field: "freightInquiryTime",
              title: "询运费时间",
              width: 150,
            },
            {
              field: "receiveDate",
              title: "销售期望发货时间",
              width: 150,
            },
            {
              field: "sendDate",
              title: "采购发货时间",
              width: 150,
            },
            {
              field: "freightPrice",
              title: "运费报价",
              width: 100,
            },
            {
              field: "freightUserName",
              title: "运费报价人",
              minWidth: 100,
            },
            {
              field: "freightStateStr",
              title: "运费状态",
              width: 100,
              showOverflow: true,
            },
            {
              field: "freightTime",
              title: "运费报价时间",
              width: 150,
            },
            {
              field: "inquiryRemark",
              title: "询价备注",
              width: 150,
              fixed: "right",
            },
            {
              field: "setting",
              title: "操作",
              width: 120,
              fixed: "right",
              slots: {
                // 使用插槽模板渲染
                default: "num3_default",
              },
            },
        ],
        data: [{}],
      },
      userOptionList2:[]
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  created() {
    let now = new Date();
    let today = formatDate(now, "yyyy-MM-dd");
    this.listQuery.freightInquiryTime = [today, today];
    if(this.$route.query.tab){
      this.listQuery.tab = this.$route.query.tab
    }
    this.handleSearchList();
    this.getUserOptionList();
    this.getUserOptionList2()
  },
  components: {
    inputFreight,
  },
  filters: {
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    //填写运费
    editFreight(item) {
      this.$refs.inputFreight.showPop(item);
    },

    //获取员工下拉选项
    getUserOptionList() {
      getOrderUsersList().then((res) => {
        this.userOptionList = res;
      });
    },
    //获取报价人下拉选项
    getUserOptionList2() {
      getOrderUsersList({status:1,departmentId:4}).then((res) => {
        this.userOptionList2 = res;
      });
    },
    //获取供应商列表
    remoteMethod3(query) {
      if (query && query != "") {
        this.loading3 = true;
        //获取供应产列表
        supplierListApi({
          tab: this.listQuery.tab,
          supplierName: query,
          pageNum: 1,
          pageSize: 1000,
        })
          .then((response) => {
            this.supplierList2 = response.list;
            this.loading3 = false;
          })
          .catch(() => {
            this.loading3 = false;
          });
      }
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      if (this.listQuery.tab == 'unFreight') {
        this.getWaitFreightList();
      } else {
        this.getListData();
      }
    },
    // 获取待填运费列表
    getWaitFreightList() {
      this.listLoading = true;
      getWaitFreightListAPI(this.listQuery1).then((res) => {
        this.listLoading = false;
        this.gridOptions.data = res.list;
        this.count = res.count;
        // 待填运费列表
        this.gridOptions.columns = [
          {
            field: "moreSuOrderSn",
            title: "订单编号",
            minWidth: 160,
          },
          {
            field: "inquiryUserName",
            title: "业务员",
            minWidth: 100,
          },
          {
            field: "chargeUserName",
            title: "采购员",
            minWidth: 100,
          },
          {
            field: "goodsSn",
            title: "品名牌号",
            minWidth: 150,
            slots: {
              default: "num4_default",
            },
          },
          {
            field: "receiveArea",
            title: "交货地",
            minWidth: 150,
          },
          {
            field: "goodsNum",
            title: "数量(吨)",
            minWidth: 120,
          },
          {
            field: "sendTypes",
            title: "交货方式",
            minWidth: 100,
          },
          {
            field: "sendArea",
            title: "发货地",
            minWidth: 150,
          },
          {
            field: "inquiryTime",
            title: "询盘时间",
            minWidth: 150,
          },
          {
            field: "receiveDate",
            title: "期望发货时间",
            minWidth: 150,
          },
          {
            field: "sendDate",
            title: "采购发货时间",
            minWidth: 150,
          },
          {
            title: "操作",
            minWidth: 150,
            fixed: "right",
            slots: {
              // 使用插槽模板渲染
              default: "num3_default",
            },
          },
        ];
      }).catch((error) => {
        console.log(error);
        this.listLoading = false;
      })
    },
     handleSizeChange1(val) {
      this.listQuery1.pageNum = 1;
      this.listQuery1.pageSize = val;
      this.getWaitFreightList();
    },
    handleCurrentChange1(val) {
      this.listQuery1.pageNum = val;
      this.getWaitFreightList();
    },
    //获取列表
    getListData() {
      this.listLoading = true;
      let data = JSON.parse(JSON.stringify(this.listQuery));
      logisticsPriceList(data)
        .then((res) => {
          this.gridOptions.data = [];
          res.list.forEach((el, i) => {
            let newEL = JSON.parse(JSON.stringify(el));
            el.qList.forEach((ee, ii) => {
              let newEE = JSON.parse(JSON.stringify(ee));
              if (ii == 0) {
                newEE.isMerge = true;
                newEE.rowNum = el.qList.length;
              } else {
                newEE.isMerge = false;
                newEE.rowNum = 0;
              }
              let copy = Object.assign({}, newEL, newEE);
              this.gridOptions.data.push(copy);
            });
          });
          // crm 全部  待物流报价  已处理
          this.gridOptions.columns = [
            {
              field: "freightSn",
              title: "编号",
              width: 100,
            },
            {
              field: "inquiryUserName",
              title: "业务员",
              width: 100,
            },
            {
              field: "chargeUserName",
              title: "采购员",
              width: 100,
            },
            {
              field: "goodsSn",
              title: "品名牌号",
              width: 120,
              slots: {
                default: "num4_default",
              },
            },
            {
              field: "receiveArea",
              title: "交货地",
              width: 150,
            },
            {
              field: "goodsNum",
              title: "数量(吨)",
              width: 120,
            },
            {
              field: "sendTypes",
              title: "交货方式",
              width: 100,
            },
            {
              field: "sendArea",
              title: "发货地",
              width: 150,
            },
            {
              field: "freightInquiryTime",
              title: "询运费时间",
              width: 150,
            },
            {
              field: "receiveDate",
              title: "销售期望发货时间",
              width: 150,
            },
            {
              field: "sendDate",
              title: "采购发货时间",
              width: 150,
            },
            {
              field: "freightPrice",
              title: "运费报价",
              width: 100,
            },
            {
              field: "freightUserName",
              title: "运费报价人",
              minWidth: 100,
            },
            {
              field: "freightStateStr",
              title: "运费状态",
              width: 100,
              showOverflow: true,
            },
            {
              field: "freightTime",
              title: "运费报价时间",
              width: 150,
            },
            {
              field: "inquiryRemark",
              title: "询价备注",
              width: 150,
              fixed: "right",
            },
            {
              field: "setting",
              title: "操作",
              width: 120,
              fixed: "right",
              slots: {
                // 使用插槽模板渲染
                default: "num3_default",
              },
            },
          ];
          this.count = res.count;
          this.listLoading = false;
          // this.gridOptions.data = res.list;
          // this.count = res.count;
          // this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getListData();
    },
  },
};
</script>

<style scoped lang="scss">
</style>
